import React, { useEffect } from 'react';
import { Table, Button } from 'antd';
import ExportJsonExcel from 'js-export-excel';

// 总量数据表格数据源
const columnSum = [
  {
    title: '日期',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '新增企业数',
    dataIndex: 'intervalCompanyNum',
    key: 'intervalCompanyNum',
    align: 'center',
  },
  {
    title: '活跃企业数',
    dataIndex: 'intervalActiviteCompanyNum',
    key: 'intervalActiviteCompanyNum',
    align: 'center',
  },
  {
    title: '新增用户数',
    key: 'intervalUserNum',
    dataIndex: 'intervalUserNum',
    align: 'center',
  },
  {
    title: '活跃用户数',
    key: 'intervalActiviteUserNum',
    dataIndex: 'intervalActiviteUserNum',
    align: 'center',
  },
  {
    title: '新增模版数',
    key: 'intervalTemplateNum',
    dataIndex: 'intervalTemplateNum',
    align: 'center',
  },
  {
    title: '新增作品数',
    key: 'intervalSceneNum',
    dataIndex: 'intervalSceneNum',
    align: 'center',
  },
  {
    title: '有作品企业数',
    key: 'intervalSceneCompanyNum',
    dataIndex: 'intervalSceneCompanyNum',
    align: 'center',
  },
  {
    title: '有作品用户数',
    key: 'intervalSceneUserNum',
    dataIndex: 'intervalSceneUserNum',
    align: 'center',
  },
  {
    title: '下载用户数',
    key: 'intervalDownloadUserNum',
    dataIndex: 'intervalDownloadUserNum',
    align: 'center',
  },
];

// 数据筛选-单日数据-表格数据源

const ExportExcel = () => {
  const tableData = [
    {
      id: '2021-9-15',
      intervalActiviteCompanyNum: 5864,
      intervalActiviteUserNum: 8458,
      intervalCompanyNum: 1854,
      intervalSceneNum: 84459,
      intervalUserNum: 4451,
      intervalTemplateNum: 695,
      intervalDownloadUserNum: 85,
      intervalSceneCompanyNum: 62,
      intervalSceneUserNum: 754,
    },
    {
      id: '2021-9-16',
      intervalActiviteCompanyNum: 51864,
      intervalActiviteUserNum: 84458,
      intervalCompanyNum: 18554,
      intervalSceneNum: 4465,
      intervalUserNum: 44581,
      intervalTemplateNum: 6945,
      intervalDownloadUserNum: 585,
      intervalSceneCompanyNum: 692,
      intervalSceneUserNum: 7564,
    }
  ]

  useEffect(() => {
    // console.log(singleData.records);
  });

  // 下载表格数据
  const downloadExcel = type => {
    const data = tableData;// 表格数据
    const option = {};
    const dataTable = [];
    if (data) {
      data.forEach((item) => {
        const obj = {
          日期: item.id,
          新增企业数: item.intervalCompanyNum,
          活跃企业数: item.intervalActiviteCompanyNum,
          新增用户数: item.intervalUserNum,
          活跃用户数: item.intervalActiviteUserNum,
          新增模版数: item.intervalTemplateNum,
          新增作品数: item.intervalSceneNum,
          有作品企业数: item.intervalSceneCompanyNum,
          有作品用户数: item.intervalSceneUserNum,
          下载用户数: item.intervalDownloadUserNum,
        };

        dataTable.push(obj);
      });
    }
    option.fileName = '总量数据';
    option.datas = [
      {
        sheetData: dataTable,
        sheetName: 'sheet',
        sheetFilter: ['日期', '新增企业数', '活跃企业数', '新增用户数', '活跃用户数', '新增模版数', '新增作品数', '有作品企业数', '有作品用户数', '下载用户数'],
        sheetHeader: ['日期', '新增企业数', '活跃企业数', '新增用户数', '活跃用户数', '新增模版数', '新增作品数', '有作品企业数', '有作品用户数', '下载用户数'],
      },
    ];
    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  };

  return (
    <div>
      <button className='returnButton' style={{ "marginTop": "-100px" }}><a href="/">点击返回主菜单</a></button>
      <div style={{"marginTop":"100px"}}>
        <h4 className="title-header">
          数据信息
          <Button type="primary" style={{ float: 'right' }} onClick={() => downloadExcel('summaryData')}>
            导出数据
          </Button>
        </h4>
        <Table
          align="center"
          pagination={false}
          columns={columnSum}
          dataSource={tableData}
          rowKey={summaryData => summaryData.id}
          className="form-container"
        />
      </div>
    </div>
  );
}

export default ExportExcel;
// 此文件是  数据概览  -  海报-数据看板  -  数据筛选  组件

